import {
  Button,
  Checkbox,
  DatePicker,
  Divider,
  Drawer,
  Empty,
  Form,
  Icon,
  ImgDefault,
  Input,
  InputNumber,
  message,
  Modal,
  Popover,
  Progress,
  Radio,
  Select,
  Space,
  Spin,
  Steps,
  Switch,
  Tooltip
} from "@bytedance/mona-ui"
import React, {
  forwardRef,
  useEffect,
  useImperativeHandle,
  useRef,
  useState
} from "react"

import { generateRandomString } from "./copyDataFomate"

const { Option } = Select

const ItemListConten = forwardRef((props: any, ref) => {
  const { item, onChangeFun } = props
  if (!item) return null
  let multiValueMeasure = []
  if (item.type === "multi_value_measure") {
    multiValueMeasure = item.measure_templates
  }
  // const [multiValueMeasure, setMultiValueMeasure] = useState(item.type === 'multi_value_measure' ? item.measure_templates : [])

  let infoSaetConter
  if (item.type === "multi_value_measure") {
    infoSaetConter = JSON.parse(JSON.stringify(item.measure_templates[0]))
    infoSaetConter.value_modules.forEach((item) => {
      item.value = ""
    })
  }

  function AddNewTitleConst(props) {
    const { title, onChangeFun, disabled = false } = props
    const [visible, setVisible] = useState(false)
    let infoSaetConter
    return (
      <div
        style={{
          padding: "5px 10px",
          borderTop: "1px solid #E5E5E5"
        }}>
        {!visible && (
          <Button
            type="link"
            disabled={disabled}
            onClick={() => {
              setVisible(true)
            }}>
            +新增{title}
          </Button>
        )}
        {visible && (
          <Space size={4}>
            <Input
              placeholder="请输入自定义属性"
              size="small"
              onChange={(e) => {
                infoSaetConter = e.target.value
              }}></Input>
            <Button
              type="link"
              icon={<Icon type="FinishIcon"></Icon>}
              style={{
                color: "#5FD07D"
              }}
              onClick={() => {
                if (infoSaetConter) {
                  onChangeFun && onChangeFun(infoSaetConter)
                }
                setVisible(false)
              }}></Button>
            <Button
              type="link"
              icon={<Icon type="CloseIcon"></Icon>}
              onClick={() => {
                setVisible(false)
              }}
              style={{
                color: "#F54050"
              }}></Button>
          </Space>
        )}
      </div>
    )
  }
  interface InfoSaetConter {
    validateStatus: "success" | "warning" | "error" | "validating"
    helpText: string | null
  }

  const [helpContent, setHelpContent] = useState<InfoSaetConter>({
    helpText: null,
    validateStatus: "success"
  })
  useImperativeHandle(ref, () => ({
    setHelpContent
  }))

  return (
    <Form.Item
      validateStatus={helpContent.validateStatus}
      help={helpContent.helpText}
      label={item.property_name}
      key={item.property_id}
      style={{
        marginBottom: 20,
        // maxWidth: 240
        width: item.type === "multi_value_measure" ? "auto" : 240
      }}
      name={(() => {
        switch (item.type) {
          case "text":
            return "Name"
            break
          case "select":
            return "Value"
            break
          case "multi_select":
            return "seletctList"
            break
          case "measure":
            return "value"
            break
          default:
            return item.property_id
            break
        }
      })()}
      rules={[{ required: !!item.required, message: "该项为必填，请输入" }]}>
      {item.type === "text" && (
        <Input
          placeholder={`请输入` + item.property_name}
          value={item.Name}
          allowClear={!item.required}
          style={{
            width: 240
          }}
          onChange={(e) => {
            // console.log('add=text', e)
            item.Name = e.target.value
            onChangeFun && onChangeFun(item)
          }}></Input>
      )}
      {item.type === "select" && (
        <Select
          showSearch
          allowClear={!item.required}
          style={{
            width: 240
          }}
          placeholder={`请选择` + item.property_name}
          value={item.Value}
          onChange={(e) => {
            item.Value = e
            onChangeFun && onChangeFun(item)

            // console.log('itemitemitemitem****////*****', item)
            if (item.property_id && item.property_id === 1687) {
              const gterInters = item.options.find(
                (iersr) => iersr.value_id === e
              )
              if (!gterInters.auto_brand) {
                setHelpContent({
                  helpText: `当前店铺类型下, 使用${gterInters.name}，需要去资质中心上传品牌资质。去上传>https://zjsms.com/NEvh47E/`,
                  validateStatus: "error"
                })
                return
              }
            }
            if (!!item.required && !e) {
              setHelpContent({
                helpText: "该项为必填，请选择",
                validateStatus: "error"
              })
              return
            }
            setHelpContent({
              helpText: null,
              validateStatus: "success"
            })
          }}
          optionFilterProp="name"
          // filterOption={true}
          dropdownRender={(menu) => {
            return (
              <>
                {menu}
                {item.diy_type === 1 && (
                  <AddNewTitleConst
                    title={item.property_name}
                    onChangeFun={(items: string) => {
                      // console.log('新增效果', item)
                      if (!item.options.includes(items)) {
                        item.options.unshift({
                          name: items,
                          value_id: items,
                          diy: 1
                        })
                        item.Value = items
                        onChangeFun && onChangeFun(item)
                      }
                    }}
                  />
                )}
              </>
            )
          }}>
          {item.options.map((item: any, index: number) => {
            return (
              <Option
                value={item.value_id}
                name={item.name}
                key={item.value_id}>
                {item.name}
              </Option>
            )
          })}
        </Select>
      )}
      {
        item.type === "multi_select" && (
          <Select
            allowClear={!item.required}
            onChange={(e: any) => {
              item.seletctList = e
              onChangeFun && onChangeFun(item)
              if (!!item.required && (!e || e.length === 0)) {
                setHelpContent({
                  helpText: "该项为必填，请选择",
                  validateStatus: "error"
                })
                return
              }
              setHelpContent({
                helpText: null,
                validateStatus: "success"
              })
            }}
            mode="multiple"
            maxTagCount={item.multi_select_max}
            showArrow
            style={{ width: "240px" }}
            value={item.seletctList}
            optionFilterProp="name"
            // tagRender={tagRender}
            // defaultValue={['cyan']}
            // options={ }
            placeholder={`请选择，最多选${item.multi_select_max}项`}
            dropdownRender={(menu) => {
              return (
                <>
                  {menu}
                  {item.diy_type === 1 && (
                    <AddNewTitleConst
                      title={item.property_name}
                      disabled={
                        item?.seletctList?.length >= item.multi_select_max
                      }
                      onChangeFun={(items: string) => {
                        if (!item.options.includes(items)) {
                          item.options.unshift({
                            name: items,
                            value_id: items,
                            diy: 1
                          })
                          // item.Value = items
                          // item.seletctList.push(items)
                          onChangeFun && onChangeFun(item)
                        }
                      }}
                    />
                  )}
                </>
              )
            }}>
            {item.options.map((items: any, index: number) => {
              return (
                <Option
                  value={items.value_id}
                  name={items.name}
                  key={items.value_id}
                  disabled={(() => {
                    if (
                      item?.seletctList?.length >= item?.multi_select_max &&
                      !item?.seletctList?.includes(items.value_id)
                    ) {
                      return true
                    }
                    return false
                  })()}>
                  {items.name}
                </Option>
              )
            })}
          </Select>
        )

        // <Select.SPMultiple
        //     style={{
        //         width: 240
        //     }}
        //     dropdownRender={menu => {
        //         return <>
        //             {menu}
        //             {item.diy_type === 1 && <div>+新增{item.property_name}</div>}
        //         </>
        //     }}
        //     allowClear placeholder="Please select">
        //     {item.options.map((item: any, index: number) => {
        //         return <Option value={item.value_id} key={item.value_id}>{item.name}</Option>
        //     })}
        // </Select.SPMultiple>
      }
      {item.type === "measure" &&
        item.measure_templates.map((res, i) => {
          return (
            <div key={i}>
              {res.value_modules.map((itemq, q) => {
                return (
                  <Input.Group
                    compact
                    key={q}
                    style={{
                      width: 240
                    }}>
                    <Input
                      wrapperStyle={{ width: 170 }}
                      placeholder={`请输入` + item.property_name}
                      value={itemq.value}
                      onChange={(e) => {
                        // console.log('add=measure', e)
                        itemq.value = e.target.value
                        onChangeFun && onChangeFun(item)
                      }}
                    />
                    <Select
                      defaultValue={itemq.units[0].unit_id}
                      value={itemq.unit_id}
                      onChange={(data) => {
                        const rusolStatus = itemq.validate_rule.unit_rules.find(
                          (u) => u.unit_id === data
                        )
                        // console.log('最大最小的限制', rusolStatus)
                      }}
                      style={{
                        width: 70
                      }}>
                      {itemq.units.map((pot, t) => {
                        return (
                          <Select.Option value={pot.unit_id} key={t}>
                            {pot.unit_name}
                          </Select.Option>
                        )
                      })}
                    </Select>
                  </Input.Group>
                )
              })}
            </div>
          )
        })}
      {item.type === "multi_value_measure" && (
        <Space direction="vertical">
          <Space wrap>
            {multiValueMeasure.map((resq: any, iner) => {
              return (
                <Space key={iner}>
                  {resq.value_modules.map((itemq, q) => {
                    return (
                      <Space key={q} size={1}>
                        {itemq.input_type === "enum_diy" && (
                          <Select
                            dropdownMatchSelectWidth={false}
                            dropdownStyle={{
                              width: "200px"
                            }}
                            onChange={(e) => {
                              // console.log('multi_value_measure', e)
                              itemq.value = e
                              onChangeFun && onChangeFun(item)
                            }}
                            style={{
                              width: 100
                            }}
                            placeholder="请选择"
                            value={itemq.value}
                            dropdownRender={(menu) => {
                              return (
                                <>
                                  {menu}
                                  {item.diy_type === 1 && (
                                    <AddNewTitleConst
                                      title="属性值"
                                      onChangeFun={(items: string) => {
                                        if (!itemq.values.includes(items)) {
                                          itemq.values.unshift({
                                            // name: items,
                                            value_name: items,
                                            diy: 1
                                          })
                                          itemq.value = items
                                          onChangeFun && onChangeFun(item)
                                        }
                                        // console.log('新增效果', items)
                                      }}
                                    />
                                  )}
                                </>
                              )
                            }}>
                            {itemq.values.map((itemaq: any, index: number) => {
                              return (
                                <Option
                                  value={itemaq.value_name}
                                  key={itemaq.value_name}
                                  disabled={(() => {
                                    // console.log('multiValueMeasure', multiValueMeasure)
                                    const getSelatcer = multiValueMeasure.some(
                                      (resiyt: any) => {
                                        const gters = resiyt.value_modules.find(
                                          (iiyter) =>
                                            iiyter.input_type === "enum_diy"
                                        )
                                        if (gters.value === itemaq.value_name) {
                                          return true
                                        }
                                        return false
                                      }
                                    )
                                    // console.log('getSelatcer', getSelatcer)
                                    return getSelatcer
                                  })()}>
                                  {itemaq.value_name}
                                </Option>
                              )
                            })}
                          </Select>
                        )}
                        {itemq.input_type === "input" && (
                          <Input
                            onChange={(e) => {
                              // console.log('input--multi_value_measure', e)
                              itemq.value = e.target.value
                              // console.log('multiValueMeasure.filter(qiuter => qiuter === "input")', multiValueMeasure)
                              const totalValues = multiValueMeasure.reduce(
                                (sum, itemsa: any) => {
                                  const getrs = itemsa.value_modules.find(
                                    (itemqq: any) =>
                                      itemqq.input_type === "input"
                                  )
                                  return Number(
                                    Number(sum) + Number(getrs.value)
                                  )
                                },
                                0
                              )
                              if (totalValues !== 100) {
                                setHelpContent({
                                  helpText: "总含量需要等于100%",
                                  validateStatus: "error"
                                })
                              } else {
                                setHelpContent({
                                  helpText: null,
                                  validateStatus: "success"
                                })
                              }
                              // console.log('totalValues', totalValues)
                              onChangeFun && onChangeFun(item)
                            }}
                            placeholder="请输入"
                            suffix={itemq?.units[0]?.unit_name || "%"}
                            value={itemq.value}
                            style={{
                              width: 90
                            }}></Input>
                        )}
                      </Space>
                    )
                  })}
                  <Button
                    type="text"
                    disabled={multiValueMeasure.length <= 1}
                    icon={<Icon type="DeleteIcon"></Icon>}
                    onClick={() => {
                      item.measure_templates = [
                        ...multiValueMeasure.filter(
                          (item, index) => index !== iner
                        )
                      ]
                      const totalValues = item.measure_templates.reduce(
                        (sum, itemsa: any) => {
                          const getrs = itemsa.value_modules.find(
                            (itemqq: any) => itemqq.input_type === "input"
                          )
                          return Number(Number(sum) + Number(getrs.value))
                        },
                        0
                      )
                      if (totalValues !== 100) {
                        setHelpContent({
                          helpText: "总含量需要等于100%",
                          validateStatus: "error"
                        })
                      } else {
                        setHelpContent({
                          helpText: null,
                          validateStatus: "success"
                        })
                      }
                      onChangeFun & onChangeFun(item)
                    }}></Button>
                </Space>
              )
            })}
          </Space>

          <Button
            onClick={() => {
              // console.log('item添加')
              item.measure_templates = [
                ...multiValueMeasure,
                { ...infoSaetConter }
              ]
              onChangeFun & onChangeFun(item)
            }}
            size="small"
            type="dashed"
            icon={<Icon type="AddIcon"></Icon>}>
            添加材质
          </Button>
        </Space>
      )}
      {item.type === "date_time_range" &&
        item.measure_templates.map((res, i) => {
          return (
            <DatePicker.RangePicker
              onChange={(e) => {
                console.log("date_time_range", e)
              }}
              key={i}
              style={{
                width: 240
              }}
              separator="—"
              format={res.value_modules[0].validate_rule.time_format}
            />
          )
        })}
    </Form.Item>
  )
})

function RendItemLista(props: any, ref) {
  const { statsDataList, index, setShowAllDataList } = props
  if (!statsDataList) return null
  // console.log('statsDataList001', statsDataList)
  // console.log('copyGoodConfig', copyGoodConfig)
  function getReFodataItem(type) {
    return statsDataList
      .filter((item) => {
        return item.important_type == type
      })
      .sort((a, b) => a.sequence - b.sequence)
  }
  const [getItemInfoData, setGetItemInfoData] = useState<any>(
    getReFodataItem(0)
  )
  const [importantPropetry, setImportantPropetry] = useState<any>(
    getReFodataItem(1)
  )

  useImperativeHandle(ref, () => ({
    getUserInfoData,
    relodeItems
  }))
  const formItems = useRef<any>({})
  function relodeItems(property_id, data, key) {
    const getOinter = getItemInfoData.find(
      (item) => item.property_id == property_id
    )
    if (getOinter) {
      getOinter[key] = data
      setGetItemInfoData([...getItemInfoData])
      return
    }
    const getOinter2 = importantPropetry.find(
      (item) => item.property_id == property_id
    )
    if (getOinter2) {
      getOinter2[key] = data
      setImportantPropetry([...importantPropetry])
      return
    }
  }
  function getUserInfoData() {
    const mergeAllData = [...getItemInfoData, ...importantPropetry]

    const formatObject = {}
    // console.log('formItems', formItems.current)
    try {
      mergeAllData.forEach((format, t) => {
        // console.log('format000', format)

        // formatObject[format.property_id] = []
        if (format.type === "text") {
          if (format.required && !format.Name) {
            formItems.current[format.property_id].setHelpContent({
              helpText: "属性不能为空",
              validateStatus: "error"
            })
            message.error(`属性${index+1}: ${format.property_name}不能为空`)
            throw new Error("属性不能为空" + JSON.stringify(format))
          }

          format.Name &&
            (formatObject[format.property_id] = [
              {
                Name: format.Name,
                PropertyId: format.property_id,
                PropertyName: format.property_name,
                Value: format.Value || 0,
                diy_type: format.diy || 0,
                measure_info: null
              }
            ])
        }
        if (format.type === "select") {
          // console.log('select format', format)

          if (format.property_id == 1687 && format.Value == "596120136") {
            return
          }
          if (
            format.required &&
            !format.options.find((iuters) => iuters.value_id == format.Value)
          ) {
            formItems.current[format.property_id].setHelpContent({
              helpText: "属性不能为空",
              validateStatus: "error"
            })
            message.error(`属性${index+1}: ${format.property_name}不能为空`)
            throw new Error("属性不能为空" + JSON.stringify(format))
          }
          ; (format.Value || format.Name) &&
            (formatObject[format.property_id] = [
              {
                Name: format.options.find(
                  (iuters) => iuters.value_id == format.Value
                ).name,
                PropertyId: format.property_id,
                PropertyName: format.property_name,
                Value: format.options.find(
                  (iuters) => iuters.value_id == format.Value
                ).diy
                  ? 0
                  : format.Value,
                diy_type:
                  format.options.find((iuters) => iuters.value_id == format.Value)
                    .diy || 0,
                measure_info: null
              }
            ])
        }

        if (format.type === "multi_select") {
          if (
            format.required &&
            (!format.seletctList || !format.seletctList.length)
          ) {
            formItems.current[format.property_id].setHelpContent({
              helpText: "属性不能为空",
              validateStatus: "error"
            })
            message.error(`属性${index+1}: ${format.property_name}不能为空`)
            throw new Error("属性不能为空" + JSON.stringify(format))
          }
          if (format.seletctList && format.seletctList.length) {
            formatObject[format.property_id] = format.seletctList.map(
              (item: any) => {
                const getContentItem = format.options.find(
                  (iuters) => iuters.value_id === item
                )
                // console.log('getContentItem', getContentItem)
                // return 123456
                return {
                  Name: getContentItem.name,
                  PropertyId: format.property_id,
                  PropertyName: format.property_name,
                  Value: getContentItem.diy ? 0 : getContentItem.value_id,
                  diy_type: getContentItem.diy || 0,
                  measure_info: null
                }
              }
            )
          }
        }
        if (format.type === "multi_value_measure") {
          console.log("format", format)
          const gteriter: any = []
          format.measure_templates.forEach((resaquer, u) => {
            const addDatas = {
              Name: (() => {
                const enum_diy = resaquer.value_modules.find(
                  (iytuers) => iytuers.input_type == "enum_diy"
                )
                const inputiy = resaquer.value_modules.find(
                  (iytuers) => iytuers.input_type == "input"
                )
                return `${enum_diy.value}${inputiy.value}${inputiy.units[0].unit_name}`
              })(),
              PropertyId: format.property_id,
              PropertyName: format.property_name,
              Value: 0,
              diy_type: 1,
              measure_info: {
                template_id: resaquer.template_id,
                values: resaquer.value_modules.map((items, qiuters) => {
                  if (!items.value) {
                    formItems.current[format.property_id].setHelpContent({
                      helpText: "属性不能为空",
                      validateStatus: "error"
                    })
                    message.error(`属性${index+1}: ${format.property_name}不能为空`)
                    throw new Error("属性不能为空" + JSON.stringify(format))
                  }
                  return {
                    module_id: items.module_id,
                    prefix: items.prefix,
                    suffix: items.suffix,
                    unit_id: items.unit_id,
                    unit_name:
                      items.input_type == "input" ? items.units[0].unit_name : "",
                    value: items.value
                  }
                })
              }
            }
            if (addDatas.Name && addDatas.Name.length > 1) {
              gteriter.push(addDatas)
            }
          })
          const totalValues = format.measure_templates.reduce(
            (sum, itemsa: any) => {
              const getrs = itemsa.value_modules.find(
                (itemqq: any) => itemqq.input_type === "input"
              )
              return Number(Number(sum) + Number(getrs.value))
            },
            0
          )
          if (totalValues !== 100) {
            formItems.current[format.property_id].setHelpContent({
              helpText: "总含量需要等于100%",
              validateStatus: "error"
            })
            // message.error("总含量需要等于100%")
            message.error(`属性${index+1}: ${format.property_name}总含量需要等于100%`)
            throw new Error("总含量需要等于100%" + JSON.stringify(format))
          } else {
            formItems.current[format.property_id].setHelpContent({
              helpText: null,
              validateStatus: "success"
            })
          }
          formatObject[format.property_id] = gteriter
        }
        if (format.type === "measure") {
          format.measure_templates.forEach((iuuters) => {
            if (!iuuters.value_modules[0].value) {
              return false
            }
            //   console.log("iuuters", iuuters, format)
            formatObject[format.property_id] = [
              {
                Name: '',
                // (() => {
                //   return `${iuuters.value_modules[0].value}${iuuters.value_modules[0].units.find((jyser) => {
                //     return jyser.unit_id == iuuters.value_modules[0].unit_id
                //   }).unit_name
                //     }`
                // })(),
                PropertyId: format.property_id,
                PropertyName: format.property_name,
                Value: 0,
                diy_type: 0,
                measure_info: {
                  template_id: iuuters.template_id,
                  values: iuuters.value_modules.map((iyter) => {
                    return {
                      module_id: iyter.module_id,
                      prefix: iyter.prefix,
                      suffix: iyter.suffix,
                      unit_id: iyter.unit_id,

                      unit_name:
                        iyter.input_type == "input"
                          ? iyter.units.find((jyser) => {
                            return (
                              jyser.unit_id == iuuters.value_modules[0].unit_id
                            )
                          }).unit_name
                          : "",
                      value: iyter.value
                    }
                  })
                },
                unit: `${iuuters.value_modules[0].unit_id},${iuuters.value_modules[0].units.find((jyser) => {
                  return jyser.unit_id == iuuters.value_modules[0].unit_id
                }).unit_name
                  }`
              }
            ]
          })
          // console.log('formatObject[format.property_id]', formatObject[format.property_id])

          formatObject[format.property_id]?.forEach(setItenr => {
            setItenr.Name = setItenr.measure_info.values.map((item) => {
              return `${item.value}${item.unit_name}`
            }).join('*')
          })
        }
        // return formatObject
      })
    } catch (error) {
      console.log('error', error)
      setShowAllDataList(true)
      throw new Error("属性不能为空" + JSON.stringify(error))
      // return
    }
    // throw new Error("属性不能为空")

    return formatObject
  }

  return (
    <div className="imsgecontenbo">
      {/* <Form layout="inline"> */}
      <Space direction="vertical">
        <div
          className="conetr"
          style={{
            fontWeight: 900,
            fontSize: "16px"
          }}>
          商品属性: {index + 1}
        </div>
        <Form.Item
          label="重要属性"
          style={{
            marginBottom: 0
          }}>
          <Space wrap align="start">
            {importantPropetry
              .filter((item) => item.type !== "multi_value_measure")
              .map((item: any, index: number) => {
                return (
                  <ItemListConten
                    item={item}
                    key={index}
                    ref={(el) => {
                      // console.log('item.property_id', item.property_id)
                      formItems.current[item.property_id] = el
                    }}
                    onChangeFun={(data) => {
                      item = data
                      setImportantPropetry([...importantPropetry])
                    }}
                  />
                )
              })}
          </Space>
          <br />
          <Space wrap>
            {importantPropetry
              .filter((item) => item.type == "multi_value_measure")
              .map((item: any, index: number) => {
                return (
                  <ItemListConten
                    item={item}
                    ref={(el) => {
                      formItems.current[item.property_id] = el
                    }}
                    key={index}
                    onChangeFun={(data) => {
                      item = data
                      setImportantPropetry([...importantPropetry])
                    }}
                  />
                )
              })}
          </Space>
        </Form.Item>
        {/* <Form.Item noStyle>
                   
                </Form.Item> */}
        <Form.Item
          label="其他属性"
          style={{
            marginBottom: 0
          }}>
          <Space wrap align="start">
            {getItemInfoData.map((item: any, index: number) => {
              return (
                <ItemListConten
                  ref={(el) => {
                    formItems.current[item.property_id] = el
                  }}
                  item={item}
                  key={index}
                  onChangeFun={(data) => {
                    item = data
                    setGetItemInfoData([...getItemInfoData])
                  }}
                />
              )
            })}
          </Space>
          {/* {getItemInfoData.map((item: any, index: number) => {
                        return <ItemListConten item={item} />
                    })} */}
        </Form.Item>
      </Space>
      {/* <Button onClick={() => {
                console.log('getItemInfoData', getItemInfoData, importantPropetry)
            }}>查看修改结果</Button> */}
      {/* </Form > */}
    </div>
  )
}
const ItemListContenRefs = forwardRef(RendItemLista)

function StatsList(props: any, ref) {
  const { statsDataList, copyGoodConfig } = props
  // console.log('copyGoodConfig', copyGoodConfig)
  if (!statsDataList) return null
  const { copynum } = copyGoodConfig
  // console.log('copynum', copynum)
  const addAllConters: any = []
  const refList = useRef<any>([])
  const [showAllDataList, setShowAllDataList] = useState(false)

  for (let i = 0; i < copynum; i++) {
    addAllConters.push(
      <div
        key={i}
        style={{
          display: (() => {
            if (!showAllDataList) {
              if (i == 0) {
                return "block"
              } else {
                return "none"
              }
            }
            return "block"
          })()
        }}>
        <ItemListContenRefs
          statsDataList={JSON.parse(JSON.stringify(statsDataList))}
          index={i}
          setShowAllDataList={setShowAllDataList}
          ref={(el: any) => {
            // console.log('el', el)

            refList.current[i] = el
          }}></ItemListContenRefs>
      </div>
    )
  }
  useImperativeHandle(ref, () => ({
    getStatsDataList() {
      const datas: any = []
      refList.current.forEach((items) => {
        if (items && items.getUserInfoData) {
          datas.push(items.getUserInfoData())
        }
      })
      return datas
    }
  }))
  const [reduterHuoDate, setReduterHuoDate] = useState(10)

  return (
    <>
      <div className="imsgecontenbo">
        <Space direction="vertical">
          <div
            className="sye"
            style={{
              color: "#000",
              fontSize: 14,
              fontWeight: 900
            }}>
            批量调整
          </div>
          <Space align="baseline">
            <Button
              type="dashed"
              size="mini"
              onClick={() => {
                setShowAllDataList(!showAllDataList)
              }}>
              {showAllDataList ? "收起全部属性" : "展开全部属性"}
            </Button>

            {statsDataList.find((itemiter) => {
              return itemiter.property_id == 3171
            }) && (
                <Space
                  style={{
                    paddingBottom: 15
                  }}>
                  <span>生成货号长度</span>
                  <InputNumber
                    value={reduterHuoDate}
                    size="small"
                    min={3}
                    max={50}
                    style={{
                      width: 80
                    }}
                    placeholder="货号随机生成长度"
                    onChange={(e: any) => {
                      setReduterHuoDate(e)
                    }}></InputNumber>
                  <Button
                    type="primary"
                    size="mini"
                    onClick={() => {
                      console.log("获取", refList.current)

                      // console.log('getDater', getDater)
                      refList.current.forEach((item: any) => {
                        if (item && item.relodeItems) {
                          const getDater = generateRandomString(reduterHuoDate)
                          item.relodeItems(3171, getDater, "Name")
                        }
                      })
                    }}>
                    随机生成并填充
                  </Button>
                </Space>
              )}
          </Space>
        </Space>
      </div>

      {addAllConters}

      {/* <Button
        onClick={() => {
          console.log("refList", refList)
          const datas: any = []
          refList.current.forEach((items) => {
            if (items && items.getUserInfoData) {
              datas.push(items.getUserInfoData())
            }
          })

          console.log("data", datas)
        }}>
        获取
      </Button> */}
    </>
  )
  // return <RendItemLista statsDataList={statsDataList}></RendItemLista>
}

export default forwardRef(StatsList)
